<template>
  <tm-app>
    <view class="fast-transaction-page">
      <view class="page-container">
        <tm-sheet class="flex flex-row-top-start" :margin="[25, 0]">
          <tm-icon name="error-warning-line" color="#4b5e7b"></tm-icon>
          <tm-sheet :margin="[10, 0, 0, 0]" padding="0">
            <tm-text color="#4b5e7b" fontSize="28">{{
              $trans("pages.fastTransaction.sellFaster")
            }}</tm-text>
            <tm-text color="#959eb0" fontSize="24" class="my-10">{{
              $trans("pages.fastTransaction.sellFasterDesc")
            }}</tm-text>
            <tm-text color="#4b5e7b" fontSize="24">{{
              $trans("pages.fastTransaction.sellFaster.guidesLink")
            }}</tm-text>
          </tm-sheet>
        </tm-sheet>

        <tm-sheet>
          <tm-row class="mb-n5">
            <tm-text class="mr-10">{{
              $trans("pages.fastTransaction.giftCardType")
            }}</tm-text>
            <tm-icon name="error-warning-line" color="#959eb0"></tm-icon>
          </tm-row>

          <tm-row column="2">
            <tm-col :span="1">
              <tm-button
                block
                :color="selectGiftCardType === 1 ? 'primary' : 'info'"
                @click="selectGiftCardType = 1"
                >{{
                  $trans("pages.fastTransaction.giftCardTypePhysical")
                }}</tm-button
              >
            </tm-col>
            <tm-col :span="1">
              <tm-button
                block
                :color="selectGiftCardType === 2 ? 'primary' : 'info'"
                @click="selectGiftCardType = 2"
                >{{
                  $trans("pages.fastTransaction.giftCardTypeECode")
                }}</tm-button
              >
            </tm-col>
          </tm-row>

          <tm-text class="my-n5">{{
            $trans("pages.fastTransaction.selectGiftCard")
          }}</tm-text>

          <PickerCell :data="selectCardItem" />

          <tm-text class="my-n5">{{
            $trans("pages.fastTransaction.selectCurrency")
          }}</tm-text>

          <PickerCell :data="selectCurrencyItem" />

          <tm-text class="my-n5">{{ $trans("pages.fastTransaction.chooserate") }}</tm-text>

          <PickerCell
            :data="selectRateItem"
            :placeholder="$trans('pages.fastTransaction.chooseratePlaceholder')"
          />

          <tm-text class="my-n5">{{
            $trans("pages.fastTransaction.giftCardAmount")
          }}</tm-text>

          <tm-sheet :margin="[0, 20]" :padding="0">
            <tm-input
              v-model="giftCardAmount"
              :placeholder="
                $trans('pages.fastTransaction.giftCardAmountPlaceholder')
              "
              type="digit"
            ></tm-input>
          </tm-sheet>

          <tm-text color="#a1a4b3" align="right" fontSize="20"
            >{{ $trans("pages.fastTransaction.giftCardAmountLimit") }}
            {{ giftCardAmountLimit.min }} -
            {{ giftCardAmountLimit.max }}</tm-text
          >
        </tm-sheet>

        <tm-sheet shadow="20">
          <tm-row class="border-b-2 pb-24">
            <tm-text color="error">*</tm-text>
            <tm-text color="#000001" fontSize="28" class="mx-10">{{
              $trans("pages.fastTransaction.uploadGiftCardImages")
            }}</tm-text>
            <tm-icon name="error-warning-line" color="#959eb0"></tm-icon>
          </tm-row>
          <tm-row class="pt-24">
            <UploadFile />
          </tm-row>
        </tm-sheet>

        <tm-sheet shadow="20">
          <tm-row class="border-b-2 pb-24">
            <tm-text color="#000001" fontSize="28">{{
              $trans("pages.fastTransaction.enterGiftCardCode")
            }}</tm-text>
          </tm-row>
          <tm-row>
            <tm-input
              v-model="giftCardCode"
              :placeholder="
                $trans('pages.fastTransaction.enterGiftCardCodePlaceholder')
              "
              inputPadding="0"
              class="flex-1"
              color="transparent"
              :focusHighlight="false"
              fontColor="#323233"
            ></tm-input>
          </tm-row>
        </tm-sheet>
      </view>
      <view class="pa-n10">
        <tm-button block round="50" @click="onSellClick">
          <tm-text color="#fff">{{
            $trans("pages.fastTransaction.sell")
          }}</tm-text>
        </tm-button>
      </view>
    </view>
  </tm-app>
</template>

<script lang="ts" setup>
import {} from "vue"
import PickerCell from "@/components/PickerCell/index.vue"
import UploadFile from "@/components/UploadFIle/index.vue"
import { translate } from "@/locale"

const selectGiftCardType = ref(1)

const selectCardItem = reactive({
  url: "https://store.tmui.design/api_v2/public/random_picture",
  name: "Razer",
})
const selectCurrencyItem = reactive({
  url: "https://store.tmui.design/api_v2/public/random_picture",
  name: "USD",
})
const selectRateItem = reactive(null)
const giftCardAmount = ref("")
const giftCardAmountLimit = reactive({
  min: 10,
  max: 299,
})
const giftCardCode = ref("")

const onSellClick = () => {
  uni.showToast({
    title: "购买成功",
    icon: "success",
  })
  uni.showLoading({
    title: translate("pages.fastTransaction.connect"),
    mask: true,
  })
  setTimeout(() => {
    uni.hideLoading()
    uni.navigateTo({
      url: "/pages/liveChat/index",
    })
  }, 1500)
}
</script>

<style lang="scss">
page {
  background-color: #fff;
  height: 100%;
}

.fast-transaction-page {
  height: 100%;
  display: flex;
  flex-flow: column;
  .page-container {
    flex: 1;
    overflow: auto;
  }
}
</style>
